<aside class="sidebar {{if this.isCollapsed 'w-8' 'w-64'}}">
  {{#if this.isCollapsed}}
    <nav class="relative flex flex-col space-y-2">
      <ul class="flex flex-col items-center space-y-3 list-none">
        <X::HdsTab
          @label="Expand"
          @icon="sidebar-show"
          @iconOnly="true"
          @action={{this.expandSidebar}}
        />
        <div class="flex flex-col space-y-1">
          <a
            href="https://docs.google.com/document/d/{{this.docID}}"
            target="_blank"
            class="x-hds-tab--link"
          >
            <FlightIcon @name="external-link" />
          </a>
        </div>
      </ul>
    </nav>
  {{else}}
    <header class="relative flex flex-col space-y-2 z-10">
      <ul class="flex w-full items-center justify-between list-none">
        <X::HdsTab
          @label="Back to Dashboard"
          @icon="arrow-left"
          @link="authenticated.dashboard"
        />
        <X::HdsTab
          @label="Collapse"
          @icon="sidebar-hide"
          @iconOnly="true"
          @action={{this.collapseSidebar}}
        />
      </ul>

      <ul class="flex w-full items-center justify-end space-x-1 pr-1 list-none">

        {{#if this.shareButtonIsShown}}
          <Hds::Dropdown @listPosition="left" as |dd|>
            <dd.ToggleIcon @icon="share" @text="share" @hasChevron={{false}} />
            <dd.CopyItem
              @text="{{this.shortLinkBaseURL}}/{{lowercase
                @document.docType
              }}/{{lowercase @document.docNumber}}"
              @copyItemTitle="Copy URL"
            />
          </Hds::Dropdown>
        {{/if}}

        <a
          href="https://docs.google.com/document/d/{{this.docID}}"
          target="_blank"
          class="flex items-center justify-center w-[32px] h-[32px] rounded-full text-white bg-[color:var(--token-color-foreground-action)] hover:bg-[color:var(--token-color-foreground-action-hover)] active:bg-[color:var(--token-color-foreground-action-active)]"
        >
          <FlightIcon @name="external-link" class="relative ml-0.5 mt-0.5" />
        </a>
      </ul>

      {{#let (get-product-id @document.product) as |productIcon|}}
        {{#if productIcon}}
          <div class="product-badge {{productIcon}}">
            <FlightIcon @name={{productIcon}} />
          </div>
        {{/if}}
      {{/let}}
    </header>

    <div class="body {{if this.sidebarBodyIsShorter 'is-shorter'}}">
      <div class="flex flex-col items-start space-y-2 px-3">
        {{#if (is-empty @document.docNumber)}}
          <small class="hds-typography-body-100 hds-foreground-faint">{{#unless
              (is-empty @document.docType)
            }}{{@document.docType}}{{/unless}}
          </small>
        {{else}}
          <small class="hds-typography-body-100 hds-foreground-faint">{{#unless
              (is-empty @document.docType)
            }}{{@document.docType}}{{/unless}}
            &bullet;
            {{@document.docNumber}}</small>
        {{/if}}
        {{#if this.editingIsDisabled}}
          <h1
            class="hds-typography-display-300 hds-font-weight-semibold hds-foreground-strong"
          >{{this.title}}</h1>
        {{else}}
          <EditableField
            @value={{this.title}}
            @onChange={{perform this.save "title"}}
            @loading={{this.save.isRunning}}
            @disabled={{this.editingIsDisabled}}
          >
            <:default>
              {{#unless (is-empty this.title)}}
                <h1
                  class="hds-typography-display-300 hds-font-weight-semibold hds-foreground-strong"
                >{{this.title}}</h1>
              {{else}}
                <h1
                  class="hds-typography-display-300 hds-font-weight-semibold hds-foreground-faint"
                >Enter a title here.</h1>
              {{/unless}}
            </:default>
            <:editing as |F|>
              <Hds::Form::Textarea::Field
                @value={{F.value}}
                name="title"
                {{on "blur" F.update}}
                as |F|
              />
            </:editing>
          </EditableField>
        {{/if}}
      </div>

      <hr class="border-0 border-b hds-border-faint mx-3" />

      <div class="flex flex-col items-start space-y-2 px-3">
        <small
          class="hds-typography-body-100 hds-foreground-faint"
        >Summary</small>
        {{#if this.editingIsDisabled}}
          <p
            class="hds-typography-body-200 hds-font-weight-medium hds-foreground-primary"
          >{{this.summary}}</p>
        {{else}}
          <EditableField
            @value={{this.summary}}
            @onChange={{perform this.save "summary"}}
            @loading={{this.save.isRunning}}
            @disabled={{this.editingIsDisabled}}
          >
            <:default>
              {{#unless (is-empty this.summary)}}
                <p
                  class="hds-typography-body-200 hds-font-weight-medium hds-foreground-primary"
                >
                  {{this.summary}}</p>
              {{else}}
                <p
                  class="hds-typography-body-200 hds-font-weight-medium hds-foreground-faint"
                >
                  Enter a summary here.</p>
              {{/unless}}
            </:default>
            <:editing as |F|>
              <Hds::Form::Textarea::Field
                @value={{F.value}}
                name="summary"
                {{on "blur" F.update}}
                as |F|
              />
            </:editing>
          </EditableField>
        {{/if}}
      </div>

      <div class="flex flex-col items-start space-y-2 px-3">
        <small
          class="hds-typography-body-100 hds-foreground-faint"
        >Status</small>
        <Doc::State
          @state={{@document.status}}
          @hideProgress={{true}}
          class="whitespace-nowrap"
        />
      </div>

      <div class="flex flex-col items-start space-y-2 px-3">
        <small
          class="hds-typography-body-100 hds-foreground-faint"
        >Product/Area</small>
        <Hds::Badge
          @text={{@document.product}}
          @icon={{get-product-id @document.product}}
        />
      </div>

      <div class="flex flex-col items-start space-y-2 px-3">
        <small
          class="hds-typography-body-100 hds-foreground-faint"
        >Owner</small>
        <Person
          @imgURL={{get @document.ownerPhotos 0}}
          @email={{get @document.owners 0}}
        />
      </div>

      <div class="flex flex-col items-start space-y-2 px-3">
        <small
          class="hds-typography-body-100 hds-foreground-faint"
        >Contributors</small>
        {{#if this.isOwner}}
          <EditableField
            @value={{this.contributors}}
            @onChange={{perform this.save "contributors"}}
            @loading={{this.save.isRunning}}
            @disabled={{this.editingIsDisabled}}
          >
            <:default>
              {{#if this.contributors.length}}
                <ol class="person-list">
                  {{#each this.contributors as |contributor|}}
                    <li>
                      <Person
                        @imgURL={{contributor.imgURL}}
                        @email={{contributor.email}}
                      />
                    </li>
                  {{/each}}
                </ol>
              {{else}}
                <em>No contributors</em>
              {{/if}}
            </:default>
            <:editing as |F|>
              <Inputs::PeopleSelect
                class="multiselect--narrow"
                @selected={{this.contributors}}
                @onChange={{this.updateContributors}}
                {{click-outside (fn F.update this.contributors)}}
              />
            </:editing>
          </EditableField>
        {{else}}
          {{#if this.contributors.length}}
            <ol class="person-list">
              {{#each this.contributors as |contributor|}}
                <li>
                  <Person
                    @imgURL={{contributor.imgURL}}
                    @email={{contributor.email}}
                  />
                </li>
              {{/each}}
            </ol>
          {{else}}
            <em>No contributors</em>
          {{/if}}
        {{/if}}
      </div>

      {{#unless this.isDraft}}
        <div class="flex flex-col items-start space-y-2 px-3">
          <small
            class="hds-typography-body-100 hds-foreground-faint"
          >Approvers</small>
          {{#if this.isOwner}}
            <EditableField
              @value={{this.approvers}}
              @onChange={{perform this.save "approvers"}}
              @loading={{this.save.isRunning}}
              @disabled={{this.editingIsDisabled}}
            >
              <:default>
                {{#if this.approvers.length}}
                  <ol class="person-list">
                    {{#each this.approvers as |approver|}}
                      <li>
                        <Person
                          @imgURL={{approver.imgURL}}
                          @email={{approver.email}}
                        />
                      </li>
                    {{/each}}
                  </ol>
                {{else}}
                  <em>No approvers</em>
                {{/if}}
              </:default>
              <:editing as |F|>
                <Inputs::PeopleSelect
                  class="multiselect--narrow"
                  @selected={{this.approvers}}
                  @onChange={{this.updateApprovers}}
                  {{click-outside (fn F.update this.approvers)}}
                />
              </:editing>
            </EditableField>
          {{else}}
            {{#if this.approvers.length}}
              <ol class="person-list">
                {{#each this.approvers as |approver|}}
                  <li>
                    <Person
                      @imgURL={{approver.imgURL}}
                      @email={{approver.email}}
                    />
                  </li>
                {{/each}}
              </ol>
            {{else}}
              <em>No approvers</em>
            {{/if}}
          {{/if}}
        </div>
      {{/unless}}

      <div class="flex flex-col items-start space-y-2 px-3">
        <small class="hds-typography-body-100 hds-foreground-faint">
          Created
        </small>
        <p>{{or @document.createdDate "Unknown"}}</p>
      </div>

      <div class="flex flex-col items-start space-y-2 px-3">
        <small class="hds-typography-body-100 hds-foreground-faint">
          Last modified
        </small>
        <p>{{@document.lastModified}}</p>
      </div>

      {{#each-in this.customEditableFields as |field attributes|}}
        {{#if
          (or
            (and (not this.editingIsDisabled) (not this.docIsApproved))
            attributes.value
          )
        }}
          <div class="flex flex-col items-start space-y-2 px-3">
            <small class="hds-typography-body-100 hds-foreground-faint">
              {{attributes.displayName}}
            </small>
            {{#if this.isOwner}}
              <CustomEditableField
                @document={{@document}}
                @field={{field}}
                @attributes={{attributes}}
                @onChange={{perform this.save field}}
                @updateFieldValue={{this.updateCustomFieldValue}}
                @loading={{this.save.isRunning}}
                @disabled={{this.editingIsDisabled}}
              />
            {{/if}}
          </div>
        {{/if}}
      {{/each-in}}
    </div>

    {{!-- <div class="flex flex-col items-start space-y-2 px-3">
      <small class="hds-typography-body-100 hds-foreground-faint">Tags</small>
      {{#if this.isOwner}}
        <EditableField
          @value={{this.tags}}
          @onChange={{perform this.save "tags"}}
          @loading={{this.save.isRunning}}
        >
          <:default>
            {{#if this.tags.length}}
              <ol>
                {{#each this.tags as |tag|}}
                  <li>
                    <FlightIcon
                      @name="tag"
                      @color="var(--token-color-palette-neutral-500)"
                    />
                    {{tag}}
                  </li>
                {{/each}}
              </ol>
            {{else}}
              <em>No tags</em>
            {{/if}}
          </:default>
          <:editing as |F|>
            <Inputs::TagSelect
              class="multiselect--narrow"
              @selected={{this.tags}}
              @onChange={{this.updateTags}}
              {{click-outside (fn F.update this.tags)}}
            />
          </:editing>
        </EditableField>
      {{else}}
        {{#if this.tags.length}}
          <ol>
            {{#each this.tags as |tag|}}
              <li>
                <FlightIcon
                  @name="tag"
                  @color="var(--token-color-palette-neutral-500)"
                />
                {{tag}}
              </li>
            {{/each}}
          </ol>
        {{else}}
          <em>No tags</em>
        {{/if}}
      {{/if}}
    </div> --}}

    {{#if this.userHasEditPrivileges}}
      <div class="sidebar-footer">
        {{#if (not @document.appCreated)}}
          <div class="px-3 -mb-1">
            <div class="w-full pt-3.5 border-t border-color-border-primary">
              <div class="text-body-200 text-color-foreground-faint">
                <h5
                  class="text-body-200 font-semibold text-color-foreground-primary flex items-center mb-1"
                >
                  Read-only headers
                  <FlightIcon
                    @name="lock"
                    class="shrink-0 text-color-foreground-faint -mt-px ml-1.5"
                  />
                </h5>
                <p class="mb-1.5">
                  Weʼre unable to edit the metadata of files created offsite.
                </p>
              </div>
              <div class="text-[12px] opacity-60 italic">Create docs in-app for
                best results</div>
            </div>
          </div>
        {{else}}
          {{#if this.isDraft}}
            {{#if this.isOwner}}
              <div class="flex items-start px-3 gap-2">
                <Hds::Button
                  @text="Request Review"
                  @size="medium"
                  @color="primary"
                  class="w-full"
                  {{on
                    "click"
                    (fn (set this "requestReviewModalIsActive" true))
                  }}
                />
                <Hds::Button
                  @text="Delete"
                  @size="medium"
                  @color="critical"
                  @icon="trash"
                  @isIconOnly={{true}}
                  class="basis-0"
                  {{on "click" (fn (set this "deleteModalIsActive" true))}}
                />
              </div>
            {{/if}}
          {{else}}
            {{#if this.isOwner}}
              <div class="flex items-start px-3 gap-2">

                <Hds::Button
                  @text={{this.moveToStatusButtonText}}
                  @size="medium"
                  @color={{this.moveToStatusButtonColor}}
                  class="w-full"
                  @icon={{if this.changeDocumentStatus.isRunning "loading"}}
                  disabled={{this.changeDocumentStatus.isRunning}}
                  {{on
                    "click"
                    (perform
                      this.changeDocumentStatus
                      this.moveToStatusButtonTargetStatus
                    )
                  }}
                />
                <Hds::Button
                  @text="Archive"
                  @size="medium"
                  @color="critical"
                  @icon="archive"
                  @isIconOnly={{true}}
                  class="basis-0"
                  disabled={{(eq @document.status "Obsolete")}}
                  {{on "click" (fn (set this "archiveModalIsActive" true))}}
                />
              </div>

            {{else}}
              {{#if this.isApprover}}
                <div class="flex flex-col items-start px-3 gap-2">
                  <Hds::Button
                    @text={{this.approveButtonText}}
                    @size="medium"
                    @color="primary"
                    class="w-full"
                    @icon={{if this.approve.isRunning "loading"}}
                    disabled={{(or
                      this.approve.isRunning
                      this.requestChanges.isRunning
                      this.hasApproved
                    )}}
                    {{on "click" (perform this.approve @profile.email)}}
                  />
                  {{#if (eq @document.docType "FRD")}}
                    <Hds::Button
                      @text={{this.requestChangesButtonText}}
                      @size="medium"
                      @color="secondary"
                      class="w-full"
                      @icon={{if this.requestChanges.isRunning "loading"}}
                      disabled={{(or
                        this.approve.isRunning
                        this.requestChanges.isRunning
                        this.hasRequestedChanges
                      )}}
                      {{on
                        "click"
                        (perform this.requestChanges @profile.email)
                      }}
                    />
                  {{/if}}
                </div>
              {{/if}}
            {{/if}}
          {{/if}}
        {{/if}}

      </div>
    {{/if}}
  {{/if}}

  {{! Place modals at the end of the DOM so they don't inherit styles }}

  {{#in-element this.modalContainer insertBefore=null}}

    {{#if this.archiveModalIsActive}}
      <Hds::Modal @color="critical" @onClose={{this.closeArchiveModal}} as |M|>
        <M.Header>
          Archive document?
        </M.Header>
        <M.Body>
          Are you sure you want to move the document
          <strong>{{this.title}}</strong>
          to
          <strong>Obsolete</strong>
          status?
          {{#if this.modalErrorIsShown}}
            <ModalAlertError
              @onDismiss={{this.resetModalErrors}}
              @title={{this.errorTitle}}
              @description={{this.errorDescription}}
            />
          {{/if}}
        </M.Body>
        <M.Footer as |F|>
          <Hds::ButtonSet>
            <Hds::Button
              @text={{if
                this.changeDocumentStatus.isRunning
                "Archiving..."
                "Yes, archive"
              }}
              @color="critical"
              @icon={{if
                this.changeDocumentStatus.isRunning
                "loading"
                "archive"
              }}
              disabled={{this.changeDocumentStatus.isRunning}}
              {{on "click" (perform this.changeDocumentStatus "Obsolete")}}
            />
            <Hds::Button
              @text="Cancel"
              @color="secondary"
              disabled={{this.changeDocumentStatus.isRunning}}
              {{on "click" F.close}}
            />
          </Hds::ButtonSet>
        </M.Footer>
      </Hds::Modal>
    {{/if}}

    {{#if this.deleteModalIsActive}}
      <Hds::Modal @color="critical" @onClose={{this.closeDeleteModal}} as |M|>
        <M.Header>
          Delete document draft?
        </M.Header>
        <M.Body>
          Are you sure you want to delete the draft
          <strong>{{this.title}}</strong>?

          {{#if this.modalErrorIsShown}}
            <ModalAlertError
              @onDismiss={{this.resetModalErrors}}
              @title={{this.errorTitle}}
              @description={{this.errorDescription}}
            />
          {{/if}}
        </M.Body>
        <M.Footer as |F|>
          <Hds::ButtonSet>
            <Hds::Button
              @text={{if
                this.deleteDraft.isRunning
                "Deleting..."
                "Yes, delete"
              }}
              @color="critical"
              @icon={{if this.deleteDraft.isRunning "loading" "trash"}}
              disabled={{this.deleteDraft.isRunning}}
              {{on "click" (perform this.deleteDraft)}}
            />
            <Hds::Button
              @text="Cancel"
              @color="secondary"
              disabled={{this.deleteDraft.isRunning}}
              {{on "click" F.close}}
            />
          </Hds::ButtonSet>
        </M.Footer>
      </Hds::Modal>
    {{/if}}

    {{#if this.requestReviewModalIsActive}}
      <Hds::Modal @onClose={{this.closeRequestReviewModal}} as |M|>
        <M.Header>
          Request review?
        </M.Header>
        <M.Body>
          <p class="mb-4 pr-16 text-body-300 text-color-foreground-primary">This
            will publish your document company-wide, and anyone you request
            below will receive a notification to review.</p>

          <Hds::Form::Field @layout="vertical" as |F|>
            <F.Control>
              <Inputs::PeopleSelect
                @renderInPlace={{true}}
                @selected={{this.approvers}}
                @onChange={{this.updateApprovers}}
                class="mb-0"
              />
            </F.Control>
            <F.Label>Request reviews</F.Label>
          </Hds::Form::Field>

          {{#if @docType.checks.length}}
            {{! For now, we only support one check }}
            {{#each (take 1 @docType.checks) as |check|}}
              <div class="mt-3.5">
                <Hds::Form::Checkbox::Field
                  {{on "change" this.onDocTypeCheckboxChange}}
                  @checked={{this.docTypeCheckboxValue}}
                  required
                  as |F|
                >
                  <F.Label>
                    {{check.label}}
                  </F.Label>
                  {{#if check.helperText}}
                    <F.HelperText>
                      {{check.helperText}}
                    </F.HelperText>
                  {{/if}}
                </Hds::Form::Checkbox::Field>
              </div>
              {{#if check.links.length}}
                <ul class="list-none pl-6 mt-1.5">
                  {{#each check.links as |link|}}
                    <li>
                      <Hds::Link::Inline
                        @icon="external-link"
                        @iconPosition="trailing"
                        @hrefIsExternal={{true}}
                        @href={{link.url}}
                        class="no-underline text-body-100"
                      >
                        {{link.text}}
                      </Hds::Link::Inline>
                    </li>
                  {{/each}}
                </ul>
              {{/if}}
            {{/each}}

          {{/if}}

          {{#if this.modalErrorIsShown}}
            <ModalAlertError
              @onDismiss={{this.resetModalErrors}}
              @title={{this.errorTitle}}
              @description={{this.errorDescription}}
            />
          {{/if}}
        </M.Body>
        <M.Footer as |F|>
          <Hds::ButtonSet>
            <Hds::Button
              {{! TODO: In the future may be use a flash message to show the
        "Takes about a minute to complete" message instead of the text in the button?}}
              @text={{if
                this.requestReview.isRunning
                "Takes about a minute to complete"
                "Request Review"
              }}
              @color="primary"
              @icon={{if this.requestReview.isRunning "loading"}}
              disabled={{or
                this.requestReview.isRunning
                (and @docType.checks.length (not this.docTypeCheckboxValue))
              }}
              {{on "click" (perform this.requestReview)}}
            />
            <Hds::Button
              @text="Cancel"
              @color="secondary"
              disabled={{@deleteDraftIsRunning}}
              disabled={{this.requestReview.isRunning}}
              {{on "click" F.close}}
            />
          </Hds::ButtonSet>
        </M.Footer>
      </Hds::Modal>
    {{/if}}

  {{/in-element}}
</aside>
